<template>
	<view class="container">
		<view v-if="false">
			<view class="user-section">
				<!-- <image class="bg" src="/static/user-bg.jpg"></image> -->
				<view class="user-info-box">
					<view class="portrait-box">
						<image class="portrait" :src="userInfo.avatar ? userInfo.avatar : '/static/missing-face.png'"></image>
					</view>
					<view class="info-box">
						<text class="username">{{ userInfo.username || '游客' }}</text>
					</view>
				</view>
				<view class="vip-card-box">
					<image class="card-bg" src="/static/vip-card-bg.png" mode=""></image>
					<!-- <view class="b-btn">
					立即开通
				</view> -->
					<view class="tit">
						<text class="yticon icon-iLinkapp-"></text>
						喂喂会员
					</view>
					<text class="e-m">uniShop</text>
					<!-- <text class="e-b">开通会员开发无bug 一测就上线</text> -->
				</view>
			</view>

			<view
				class="cover-container"
				:style="[
					{
						transform: coverTransform,
						transition: coverTransition
					}
				]"
				@touchstart="coverTouchstart"
				@touchmove="coverTouchmove"
				@touchend="coverTouchend"
			>
				<image class="arc" src="/static/arc.png"></image>

				<!-- 订单 -->
				<view class="order-header">
					<view class="title">我的订单</view>
					<view class="item" @click="$api.navTo('/pages/order/order?state=0')">
						查看全部订单
						<text class="yticon right icon-you"></text>
					</view>
				</view>
				<view class="order-section">
					<view class="order-item" @click="$api.navTo('/pages/order/order?state=1')" hover-class="common-hover" :hover-stay-time="50">
						<text class="yticon icon-daifukuan"></text>
						<text class="num" v-if="orderNum.unpaid > 0">{{ orderNum.unpaid }}</text>
						<text>待付款</text>
					</view>
					<view class="order-item" @click="$api.navTo('/pages/order/order?state=2')" hover-class="common-hover" :hover-stay-time="50">
						<text class="yticon icon-daifahuo"></text>
						<text class="num" v-if="orderNum.undelivered > 0">{{ orderNum.undelivered }}</text>
						<text>待发货</text>
					</view>
					<view class="order-item" @click="$api.navTo('/pages/order/order?state=3')" hover-class="common-hover" :hover-stay-time="50">
						<text class="yticon icon-daishouhuo"></text>
						<text class="num" v-if="orderNum.unreceived > 0">{{ orderNum.unreceived }}</text>
						<text>待收货</text>
					</view>
					<view class="order-item" @click="$api.navTo('/pages/order/order?state=4')" hover-class="common-hover" :hover-stay-time="50">
						<text class="yticon icon-pingjia"></text>
						<text class="num" v-if="orderNum.uncomment > 0">{{ orderNum.uncomment }}</text>
						<text>评价</text>
					</view>
					<view class="order-item" @click="$api.navTo('/pages/order/order?state=5')" hover-class="common-hover" :hover-stay-time="50">
						<text class="yticon icon-shouhou"></text>
						<text class="num" v-if="orderNum.refund > 0">{{ orderNum.refund }}</text>
						<text>退款/售后</text>
					</view>
				</view>
				<!-- 浏览历史 -->
				<view class="history-section icon">
					<!-- <view class="sec-header">
					<text class="yticon icon-lishijilu"></text>
					<text>浏览历史</text>
				</view> -->
					<!-- <scroll-view scroll-x class="h-list">
					<image @click="navTo('/pages/product/product')" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1553105186633&di=c121a29beece4e14269948d990f9e720&imgtype=0&src=http%3A%2F%2Fimg004.hc360.cn%2Fm8%2FM04%2FDE%2FDE%2FwKhQplZ-QteEBvsbAAAAADUkobU751.jpg" mode="aspectFill"></image>
					<image @click="navTo('/pages/product/product')" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1553105231218&di=09534b9833b5243296630e6d5b728eff&imgtype=0&src=http%3A%2F%2Fimg002.hc360.cn%2Fm1%2FM05%2FD1%2FAC%2FwKhQcFQ3iN2EQTo8AAAAAHQU6_8355.jpg" mode="aspectFill"></image>
					<image @click="navTo('/pages/product/product')" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1553105320890&di=c743386be51f2c4c0fd4b75754d14f3c&imgtype=0&src=http%3A%2F%2Fimg007.hc360.cn%2Fhb%2FMTQ1OTg4ODY0MDA3Ny05OTQ4ODY1NDQ%3D.jpg" mode="aspectFill"></image>
					<image @click="navTo('/pages/product/product')" src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2691146630,2165926318&fm=26&gp=0.jpg" mode="aspectFill"></image>
					<image @click="navTo('/pages/product/product')" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1553105443324&di=8141bf13f3f208c61524d67f9bb83942&imgtype=0&src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01ac9a5548d29b0000019ae98e6d98.jpg" mode="aspectFill"></image>
					<image @click="navTo('/pages/product/product')" src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=191678693,2701202375&fm=26&gp=0.jpg" mode="aspectFill"></image>
				</scroll-view> -->
					<!-- <list-cell icon="icon-iconfontweixin" iconColor="#e07472" title="我的钱包" tips="您的会员还有3天过期"></list-cell> -->
					<list-cell icon="icon-dizhi" iconColor="#5fcda2" title="地址管理" @eventClick="$api.navTo('/pages/address/address')"></list-cell>
					<!-- <list-cell icon="icon-share" iconColor="#9789f7" title="分享" tips="邀请好友赢10万大礼"></list-cell> -->
					<!-- <list-cell icon="icon-pinglun-copy" iconColor="#ee883b" title="晒单" tips="晒单抢红包"></list-cell> -->
					<list-cell icon="icon-shoucang-setting" iconColor="#54b4ef" title="我的收藏" @eventClick="$api.navTo('/pages/favorite/favorite')"></list-cell>
					<list-cell icon="icon-setting" iconColor="#e07472" title="设置" border="" @eventClick="$api.navTo('/pages/set/set')"></list-cell>
				</view>
			</view>
		</view>

		<view class="user_bodys">
			<view class="user_image">
				<image :src="userInfo.avatar ? userInfo.avatar : '/static/missing-face.png'" mode="aspectFill"></image>
			</view>

			<view class="user_info">
				<view class="user_name">{{ userInfo.username || '游客' }}</view>
				<view class="user_id">ID: {{ userInfo.id || '游客' }}</view>
			</view>
		</view>

		<view class="user_menu">
			<view class="menu_tit">我的订单</view>

			<view class="user_menu_in">
				<view class="user_menuli" @click="$api.navTo('/pages/order/order?state=0')">
					<view class="user_menulit">
						<image src="/static/temp/dd.png"></image>
					</view>
					<view class="user_menulib">我的订单</view>
				</view>
				<view class="user_menuli" @click="$api.navTo('/pages/recycle/order/recycleOrder?state=0')">
					<view class="user_menulit">
						<image src="/static/temp/hs.png"></image>
					</view>
					<view class="user_menulib">回收订单</view>
				</view>
				<view class="user_menuli" @click="$api.navTo('/pages/recycle/order/maintenanceOrder?state=0')">
					<view class="user_menulit">
						<image src="/static/temp/wx.png"></image>
					</view>
					<view class="user_menulib">维修订单</view>
				</view>
				<view class="user_menuli" @click="toCart">
					<view class="user_menulit">
						<image src="/static/temp/gwc.png"></image>
					</view>
					<view class="user_menulib">购物车</view>
				</view>
			</view>
		</view>

		<view class="user_more">
			<view class="menu_tit">我的工具</view>

			<view class="user_more_in">
				<view class="user_moreli" @click="$api.navTo('/pages/address/address')">
					<view class="user_menulit">
						<image src="/static/user/shdz.png"></image>
					</view>
					<view class="user_menulib">收货地址</view>
				</view>

				<view class="user_moreli" @click="$api.navTo('/pages/user/coupon')">
					<view class="user_menulit">
						<image src="/static/user/yhq.png"></image>
					</view>
					<view class="user_menulib">优惠券</view>
				</view>

				<view class="user_moreli" @click="$api.navTo('/pages/favorite/favorite')">
					<view class="user_menulit">
						<image src="/static/user/sc.png"></image>
					</view>
					<view class="user_menulib">收藏</view>
				</view>

				<view class="user_moreli" @click="$api.navTo('/pages/set/set')">
					<view class="user_menulit">
						<image src="/static/user/sz.png"></image>
					</view>
					<view class="user_menulib">设置</view>
				</view>

				<view class="user_moreli">
					<view class="user_menulit">
						<image src="/static/user/lxkf.png"></image>
					</view>
					<view class="user_menulib">在线客服</view>
					<button class="contact-btn" open-type="contact">客服</button>
				</view>

				<view class="user_moreli" @click="$api.navTo('/pages/user/agreement?type=3')">
					<view class="user_menulit">
						<image src="/static/user/xsbd.png"></image>
					</view>
					<view class="user_menulib">购机必读</view>
				</view>

				<view class="user_moreli" @click="$api.navTo('/pages/user/agreement?type=4')">
					<view class="user_menulit">
						<image src="/static/user/hsbd.png"></image>
					</view>
					<view class="user_menulib">回收必读</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
import listCell from '@/components/mix-list-cell';
import { mapState } from 'vuex';
let startY = 0,
	moveY = 0,
	pageAtTop = true;
export default {
	components: {
		listCell
	},
	data() {
		return {
			coverTransform: 'translateY(0px)',
			coverTransition: '0s',
			moving: false,
			orderNum: {
				unpaid: 0,
				undelivered: 0,
				unreceived: 0,
				uncomment: 0,
				refund: 0
			}
		};
	},
	onLoad() {},
	onShow() {
		if (this.hasLogin) {
			this.getOrderNum();
		}
	},
	// #ifndef MP
	onNavigationBarButtonTap(e) {
		const index = e.index;
		if (index === 0) {
			this.navTo('/pages/set/set');
		} else if (index === 1) {
			// #ifdef APP-PLUS
			const pages = getCurrentPages();
			const page = pages[pages.length - 1];
			const currentWebview = page.$getAppWebview();
			currentWebview.hideTitleNViewButtonRedDot({
				index
			});
			// #endif
			uni.navigateTo({
				url: '/pages/notice/notice'
			});
		}
	},
	// #endif
	computed: {
		...mapState(['hasLogin', 'userInfo'])
	},
	methods: {
		toCart() {
			uni.switchTab({
				url: '/pages/cart/cart'
			});
		},
		/**
		 *  会员卡下拉和回弹
		 *  1.关闭bounce避免ios端下拉冲突
		 *  2.由于touchmove事件的缺陷（以前做小程序就遇到，比如20跳到40，h5反而好很多），下拉的时候会有掉帧的感觉
		 *    transition设置0.1秒延迟，让css来过渡这段空窗期
		 *  3.回弹效果可修改曲线值来调整效果，推荐一个好用的bezier生成工具 http://cubic-bezier.com/
		 */
		coverTouchstart(e) {
			if (pageAtTop === false) {
				return;
			}
			this.coverTransition = 'transform .1s linear';
			startY = e.touches[0].clientY;
		},
		coverTouchmove(e) {
			moveY = e.touches[0].clientY;
			let moveDistance = moveY - startY;
			if (moveDistance < 0) {
				this.moving = false;
				return;
			}
			this.moving = true;
			if (moveDistance >= 80 && moveDistance < 100) {
				moveDistance = 80;
			}

			if (moveDistance > 0 && moveDistance <= 80) {
				this.coverTransform = `translateY(${moveDistance}px)`;
			}
		},
		coverTouchend() {
			if (this.moving === false) {
				return;
			}
			this.moving = false;
			this.coverTransition = 'transform 0.3s cubic-bezier(.21,1.93,.53,.64)';
			this.coverTransform = 'translateY(0px)';
		},
		// 获取订单数量
		async getOrderNum() {
			let data = await this.$api.request('/order/count');
			if (data) {
				this.orderNum = {
					unpaid: data.unpaid ? data.unpaid : 0,
					undelivered: data.undelivered ? data.undelivered : 0,
					unreceived: data.unreceived ? data.unreceived : 0,
					uncomment: data.uncomment ? data.uncomment : 0,
					refund: data.refund ? data.refund : 0
				};
			}
		}
	}
};
</script>
<style lang="scss" scoped>
.user_moreli {
	width: 165rpx;
	height: 150rpx;
	margin-bottom: 10rpx;
	position: relative;
}
.contact-btn {
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 10;
	top: 0;
	opacity: 0;
}

.user_more_in {
	width: 660rpx;
	height: auto;
	margin: auto;
	display: flex;
	flex-wrap: wrap;
}

.user_more {
	width: 700rpx;
	height: auto;
	margin: auto;
	margin-top: 30rpx;
	border-radius: 18rpx;
	background: #ffffff;
	box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.07);
	padding: 15rpx 0;
}

.user_menulib {
	height: 50rpx;
	width: 100%;
	text-align: center;
	line-height: 50rpx;
	font-size: 26rpx;
}

.user_menulit > image {
	width: 80rpx;
	height: 80rpx;
}

.user_menulit {
	width: 80rpx;
	height: 80rpx;
	margin: auto;
	margin-top: 20rpx;
}

.user_menuli {
	width: 150rpx;
	height: 150rpx;
	border: 1px solid transparent;
}

.user_menu_in {
	width: 660rpx;
	height: 170rpx;
	margin: auto;
	display: flex;
	align-items: center;
	justify-content: space-around;
}

.menu_tit {
	width: 660rpx;
	height: 60rpx;
	font-size: 30rpx;
	margin: auto;
	line-height: 70rpx;
	font-weight: bold;
}

.user_menu {
	width: 700rpx;
	margin: -120rpx auto 0;
	border-radius: 18rpx;
	background: #ffffff;
	box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.07);
	padding: 15rpx 0;
}

.user_id {
	height: 50rpx;
	line-height: 40rpx;
	font-size: 26rpx;
	font-weight: 400;
	margin-top: 20rpx;
}

.user_name {
	height: 50rpx;
	line-height: 60rpx;
	font-size: 34rpx;
	font-weight: 600;
}

.user_info {
	width: 500rpx;
	height: 100rpx;
	margin-left: 20rpx;
	color: #fff;
}

.user_image > image {
	width: 160rpx;
	height: 160rpx;
	border-radius: 100rpx;
	border: 8rpx solid #fff;
}

.user_image {
	width: 160rpx;
	height: 160rpx;
}

page {
	background: #fff;
}

.user_bodys {
	width: 100%;
	margin: auto;
	padding: 60px 30rpx 190rpx;
	display: flex;
	align-items: center;
	background-color: #dba871;
	background: linear-gradient(#dba871, #efb77c, #fff);
}
</style>
